<template>
	<div>
		<!--查询部分-->
		<el-row>
			<el-col :span="1">
				<p class="queryLabel">选择年：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;">
				<el-date-picker v-model="queryData.year" size="small" style="width:100%;margin-left:5px;" type="year" clearable placeholder="请选择年份">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="queryButton">查 询</el-button>
			</el-col>
			<el-col :span="1" style="margin-left: 600px;">
				<el-button size="small" type="primary" @click="addButton">新 增</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="editButton">编 辑</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="startMonthly">生成月度目标</el-button>
			</el-col>
			
		</el-row>
		
		<!--表格部分-->
		<el-row>
			<el-col :span = "24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50">
					</el-table-column>
					<el-table-column prop="year" label = "年份" width="100"></el-table-column>
					<el-table-column prop="january" label = "一月" width="100"></el-table-column>
					<el-table-column prop="february" label = "二月" width="100"></el-table-column>
					<el-table-column prop="march" label = "三月" width="100"></el-table-column>
					<el-table-column prop="april" label = "四月" width="100"></el-table-column>
					<el-table-column prop="may" label = "五月" width="100"></el-table-column>
					<el-table-column prop="june" label = "六月" width="100"></el-table-column>
					<el-table-column prop="july" label = "七月" width="100"></el-table-column>
					<el-table-column prop="august" label = "八月" width="100"></el-table-column>
					<el-table-column prop="september" label = "九月" width="100"></el-table-column>
					<el-table-column prop="october" label = "十月" width="100"></el-table-column>
					<el-table-column prop="november" label = "十一月" width="100"></el-table-column>
					<el-table-column prop="december" label = "十二月" width="100"></el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" @current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total"></el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog title="新增" v-model="addDialogShow" size = "tiny">
			
			<el-form :model="editData" :rules="rules" ref="editData" class="demo-ruleForm">
			  
			  <el-form-item label="选择年" prop="year">
			   		<el-date-picker v-model="editData.year" size="small" style="width:100px;" type="year" clearable placeholder="请选择年份">
					</el-date-picker>
			  </el-form-item>
			  
			  
			  	<el-row>
			  		
			  		<el-col :span="7">
					   <el-form-item label="一月" prop="january" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.january" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="二月" prop="february" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.february" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="三月" prop="march" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.march" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
			  
			   	<el-row>
			  		<el-col :span="7">
					   <el-form-item label="四月" prop="april" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.april" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="五月" prop="may" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.may" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="六月" prop="june" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.june" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
			  		<el-col :span="7">
					   <el-form-item label="七月" prop="july" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.july" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="八月" prop="august" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.august" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="九月" prop="september" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.september" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
			  		<el-col :span="7">
					   <el-form-item label="十月" prop="october" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.october" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="十一月" prop="november" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.november" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="十二月" prop="december" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.december" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
			</el-form>
	
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="addSubmit('editData')">提 交</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="addCansel">取 消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		<el-dialog title="编辑" v-model="editDialogShow" size = "tiny">
			<el-form :model="editData" :rules="rules" ref="editData" class="demo-ruleForm">
			  
			  <el-form-item label="选择年" prop="year">
			   		<el-date-picker v-model="editData.year" size="small" style="width:100px;" type="year" clearable placeholder="请选择年份">
					</el-date-picker>
			  </el-form-item>
			  
			  
			  	<el-row>
			  		
			  		<el-col :span="7">
					   <el-form-item label="一月" prop="january" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.january" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="二月" prop="february" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.february" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="三月" prop="march" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.march" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
			  
			   	<el-row>
			  		<el-col :span="7">
					   <el-form-item label="四月" prop="april" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.april" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="五月" prop="may" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.may" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="六月" prop="june" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.june" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
			  		<el-col :span="7">
					   <el-form-item label="七月" prop="july" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.july" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="八月" prop="august" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.august" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="九月" prop="september" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.september" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
			  		<el-col :span="7">
					   <el-form-item label="十月" prop="october" style="margin-left: 0px;">
							<el-input type="number" v-model="editData.october" size="small" placeholder="权重" ></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="十一月" prop="november" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.november" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
					<el-col :span="7">
					   <el-form-item label="十二月" prop="december" style="margin-left: 15px;">
							<el-input type="number" v-model="editData.december" size="small" placeholder="权重"></el-input>
					  </el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="editSubmit('editData')">提 交</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="editCansel">取 消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		
	</div>
</template>

<script>
	export default {
		data:function(){
			return{
				
				// 规则
				 rules: {
		          year: [
		            { type:'date',required: true, message: '请选择年份', trigger: 'change'} 
		           
		          ],  
		           january: [
		            { required: true, message: '请输入权重', trigger: 'blur' }
		           
		          ],
		          february:[
		          { required: true, message: '请输入权重', trigger: 'blur' }
		          
		          ],
		           march:[
		          { required: true, message: '请输入权重', trigger: 'blur' }
		          ],
		          april:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          may:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          june:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          july:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          august:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          september:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          october:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          
		          november:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          december:[{
		          	required: true, message: '请输入权重', trigger: 'blur' 
		          }],
		          
				 },
				 
				// 是否允许编辑
				disabled:[
				],
				// 工单类型下拉
				ItemTypeCombo:[{
					value:"zf",
					label:"自费",
				},{
					value:"df",
					label:"垫付",
				},{
					value:"sp",
					label:"索赔",
				},],
				// 新增dialog显示
				addDialogShow:false,
				//  编辑dialog 显示
				editDialogShow:false,
				// 查询集合
				queryData:{
					year:"",
				},
				CurentPage: 1,
				page: this.page,
				// 查询数据
				tableData:{
					total:0,
					dataList:[],
				},
	
				// 修改数据
				editData:{
					year:"",
					january:"",
					february:"",
					march:"",
					april:"",
					may:"",
					june:"",
					july:"",
					august:"",
					september:"",
					october:"",
					november:"",
					december:"",
					id:"",
					
				},
				// 修改数据初始化
				emptyEditData:{
					year:"",
					january:"",
					february:"",
					march:"",
					april:"",
					may:"",
					june:"",
					july:"",
					august:"",
					september:"",
					october:"",
					november:"",
					december:"",
					id:"",
					
				},
				// 选择数据
				multipleSelection:"",
				
			}
		},
		methods:{
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				/*if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");*/
			},
			// 查 询 
			queryButton:function(){
				debugger;
				this.$data.queryData.year = this.timeCov(this.$data.queryData.year);
				this.$http.get(this.API_ROOT + '/crm/qz/page', {
					params: {
						year:this.$data.queryData.year,
						start:this.CurentPage,
						limit: this.$data.page.pageSize,
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData.dataList = resp.data.dataList;
						this.$data.tableData.total = resp.data.total;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 添加按钮
			addButton:function(){
				//alert("新增");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.$data.addDialogShow = true;
			},
			
			/**编辑按钮**/
			editButton:function(){
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				//alert("编辑");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.getDataById();
				this.$data.editDialogShow = true;
			},
			// 编辑获取选中信息
			getDataById:function(){
				debugger;
				this.$http.get(this.API_ROOT + '/crm/qz/info', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						debugger;
						this.$data.editData.year = new Date(resp.data.data.year.toString());
						this.$data.editData.january = resp.data.data.january.toString();
						this.$data.editData.february = resp.data.data.february.toString();
						this.$data.editData.march = resp.data.data.march.toString();
						this.$data.editData.april = resp.data.data.april.toString();
						this.$data.editData.may = resp.data.data.may.toString();
						this.$data.editData.june = resp.data.data.june.toString();
						this.$data.editData.july = resp.data.data.july.toString();
						this.$data.editData.august = resp.data.data.august.toString();
						this.$data.editData.september = resp.data.data.september.toString();
						this.$data.editData.october = resp.data.data.october.toString();
						this.$data.editData.november = resp.data.data.november.toString();
						this.$data.editData.december = resp.data.data.december.toString();
						this.$data.editData.id = resp.data.data.id;
						
						var disabled = resp.data.data.disabled;
						if(disabled == "all"){ // 全部禁用
							for(var i=1;i<=12;i++){
									this.$data.disabled[i] = true;
							}
						}
						else if(disabled == "-1"){ // 全部可用
							for(var i=1;i<=12;i++){
									this.$data.disabled[i] = false;
							}
						}
						else{ // 月份以后可用
							for(var i=1  ; i< Number(disabled) ; i++){ 
									this.$data.disabled[i] = true;
							}
							for(var i=Number(disabled) ; i<=12 ; i++){
									this.$data.disabled[i] = false;
							}
						}
						
					} else {
						//this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 生成月度目标
			startMonthly:function(){
				alert("生成月度目标");
			},
			// 停用
			stopButton:function(){
				//alert("停用");
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				this.$http.get(this.API_ROOT + '/crm/wo/xftype/stop', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					} else {
						this.$message.error(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					}
				}, resp => {
				});
			},
			/**【添加】提交**/
			addSubmit:function(formName){
				
				this.$refs[formName].validate((valid) => {
		          if (valid) {
				//var a = this.$data.editData.year;
					debugger;
					this.$data.editData.year = this.timeCov(this.$data.editData.year);
					this.$http.post(this.API_ROOT + '/crm/qz/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.addDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							this.$data.editData.year = new Date(this.$data.editData.year);
							this.$message.error(resp.data.msg);
						}
					}, resp => {
					});
				
				} else {
		            this.$message.error("表单填写不全！");
		            return false;
		         }
		        });
				
			},
			/**【添加】取消**/
			addCansel:function(){
				//alert("新增取消");
				this.$data.addDialogShow = false;
			},
			
			/** 【编辑】提交 **/
			editSubmit:function(formName){
				var tempDate = this.$data.editData.year;
				debugger;
				this.$refs[formName].validate((valid) => {
		          if (valid) {
						
					//alert("新增提交");
					this.$data.editData.id = this.$data.multipleSelection[0].id;
					this.$data.editData.year = this.timeCov(this.$data.editData.year);
					debugger;
					this.$http.post(this.API_ROOT + '/crm/qz/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.editDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							debugger;	
							//alert("error");
							this.$data.editData.year = new Date(this.$data.editData.year);
							this.$message.error(resp.data.msg);
							
							//this.$data.editData.year = new Date(this.$data.editData.year);
						}
					}, resp => {
						//alert("resp");
					});
				
				} else {
		            this.$message.error("表单填写不全！");
		            
		            return false;
		         }
		        });
		        
		        //this.$data.editData.year = new Date(this.$data.editData.year);
				
			},
			/**【编辑】 取消**/
			editCansel:function(){
				//alert("新增取消");
				this.$data.editDialogShow = false;
			},
			
			//列表分页大小切换
			handleSizeChange: function() {},
			//列表当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.queryButton();
			},
			// 状态转换
			statusCov:function(row){
				switch (row.status) {
					case '0':
					return "未启用";
					break;
					case '1':
					return "已启用";
					break;
					default:
					return "状态未知";
					break;
					
				}
			},
			// 年份转换
			yearCov:function(row){
				return this.timeCov(row.year);
			},
			timeCov:function(d){
				if(d == null || d == ""){
					return "";
				}
				else{
					debugger;
					/*if(typeof d=='string'){
						return d;
					}
					else{*/
						return this.moment(d).format("YYYY");
					//}
					
				}
			}
		},
		created:function(){
			this.queryButton();
		}
	}
</script>

<style>
</style>